<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.js"></script>
</head>
<style>
    table {
        width: 800px;
        border-collapse: collapse;
        margin: auto;
    }

    tr,
    th,
    td {
        border: 1px solid black;
        text-align: center;
    }

    p {
        text-align: center;
        font-size: 24px;
    }
</style>

<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="all"></th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <p>总价：<span></span></p>
</body>
<script>
    var goods = [
        {
            name: '苹果',
            price: '10',
            num: 0
        },
        {
            name: '香蕉',
            price: '12',
            num: 0
        },
        {
            name: '榴莲',
            price: '50',
            num: 0
        },
        {
            name: '葡萄',
            price: '8',
            num: 0
        }
    ]
    $(function () {
        // 页面显示
        showList()
        // 计算金额
        countPrice()
    })
    // 全选
    $('#all').click(function () {
        $('tbody input').prop('checked', $(this).prop('checked'))
        for (let i in goods) {
            goods[i].status = $(this).prop('checked')
        }
        // 计算金额
        countPrice()
        // 本地存储
        saveData()
    })
    // $('tbody').click(function(){
    //     // console.log($('input:checkbox').prop('checked'));
    //     var index = $(event.target).attr('data-id')
    //     if ($(event.target).attr('type') == 'number') {
    //         var num = $(event.target).val()
    //         goods[i].num = num
    //     }
    // })
    function showList() {
        // 本地存储
        goods = localStorage.getItem('goods') ? JSON.parse(localStorage.getItem('goods')) : goods
        var str = ''
        for (var i in goods) {
            str += `<tr>
                        <td><input type="checkbox" name='check'></td>
                        <td>${goods[i].name}</td>
                        <td>${goods[i].price}</td>
                        <td>
                            <input type="button" value="-" onclick="updateNumDown(${i},this)" id='jian'>
                            <input type="number" data-id="${i}" value="${goods[i].num}" min='0' class='num'>
                            <input type="button" value="+" onclick="updateNumUp(${i},this)" id='jia'>
                        </td>
                    </tr>`
            $('tbody').html(str)
        }
    }
    // 计算金额
    function countPrice() {
        var total = 0
        $('tbody input:checkbox').each(function (index, item) {
            if ($(item).prop('checked')) {
                total += goods[index].price * goods[index].num
            }
        })
        $('p span').html(total)
    }
    // 数量--
    function updateNumDown(index, obj) {
        if (goods[index].num == 0) {
            return
        }
        $(obj).next().val(--goods[index].num)
        countPrice()
        saveData()
    }
    // 数量++
    function updateNumUp(index, obj) {
        $(obj).prev().val(++goods[index].num)
        countPrice()
        saveData()
    }
    // 本地存储
    function saveData() {
        localStorage.setItem('goods', JSON.stringify(goods))
    }
</script>

</html>